<template>
  <div class="card">
    <img 
      v-if="exhibit.imageUrl" 
      :src="exhibit.imageUrl" 
      :alt="exhibit.name" 
      class="w-full h-48 object-cover rounded-t-lg mb-4"
    />
    <div v-else class="w-full h-48 bg-gray-200 rounded-t-lg mb-4 flex items-center justify-center">
      <span class="text-gray-500">暂无图片</span>
    </div>
    
    <h2 class="text-xl font-semibold mb-2">{{ exhibit.name }}</h2>
    <p class="text-gray-600 mb-2">{{ exhibit.period }}</p>
    <p class="mb-4">{{ truncateText(exhibit.description, 100) }}</p>
    
    <div class="flex justify-between items-center">
      <button @click="$emit('view-details', exhibit.id)" class="btn btn-primary">
        查看详情
      </button>
      <span v-if="exhibit.featured" class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-sm">
        精选展品
      </span>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

defineEmits(['view-details'])

const props = defineProps({
  exhibit: {
    type: Object,
    required: true
  }
})

const truncateText = (text, length) => {
  if (!text) return ''
  return text.length > length ? text.substring(0, length) + '...' : text
}
</script> 